<template>
  <div class="shoppingMall">
    <div class="title">
      <p>健康商城</p>
    </div>
      <!-- <van-search v-model="searchValue" placeholder="请输入搜索关键词" input-align="center" /> -->
    <div class="shoppingList">
      <div>
        <van-sidebar @change="onChanges" v-model="activeKey">
          <van-sidebar-item v-for="(item,i) in categoryItem" :key="i" :title="item.name" />
        </van-sidebar>
      </div>
      <div class="healthImgItem">
        <div class="image" v-for="(list,i) in commodityItem" :key="i" @click="()=>{$router.push({path:'/commodityDetails',query:{id:list.id}})}">
          <img height="100" :src="list.mainImage" />
          <p>￥{{list.originPrice}} 元</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    activeKey: 0,
    searchValue:null,
    categoryItem: [],
    commodityItem: []
  }),
  mounted() {
    this.$axios
      .notLoggedIn(`ym/mall-product-category/list?parentId=0`)
      .then(msg => {
        console.log("获取商品类别成功！");
        msg.forEach(item => {
          this.categoryItem.push(item);
        });
        this.getCommodityItem(this.categoryItem[0].id);
      });
  },
  methods: {
    getCommodityItem(index) {
      this.$axios
        .notLoggedIn(`ym/mall-product/list?page=1&limit=5&id=${index}`)
        .then(res => {
          this.commodityItem = res.records;
        });
        console.log(this.commodityItem)
    },
    onChanges(index) {
      this.getCommodityItem(this.categoryItem[index].id);
    }
  }
};
</script>
<style lang="scss">
@mixin flexSty {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  width: 100%;
}
.shoppingMall {
  .title {
    p {
      margin: 0;
      padding: 0;
      text-align: center;
      height: 40px;
      line-height: 40px;
      background: #ccc;
    }
  }
  .shoppingList {
    display: flex;
    flex-direction: inherit;
    .healthImgItem {
      @include flexSty();
      .image {
        display: inline-block;
        width: 48%;
        padding: 2px;
        img {
          width: 100%;
        }
        p {
          margin: 0;
          text-align: center;
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
</style>